<template>
	<div id='personInfo'>
		<div class="info-item my-item" v-if="employeeForm">
      <!--my info -->
      <div class="title">
        <i class="iconfont title-icon my-icon">&#xe672;</i>MyInfo
        <i v-if="!editMyInfo" class="iconfont edit-icon" @click="editMyInfo = true">&#xe663;</i>
        <i v-if="editMyInfo" class="iconfont edit-icon" @click="editMyInfo = false">&#xe61a;</i>
      </div>
      <div class="content" v-if="!editMyInfo">
        <div class="sub-info-item">
          <div class="sub-title">Basic Information</div>
          <div class="sub-content">
            <Row class="sub-row">
              <i-col span="6">
                <label class="label" style="width: 100px">Employee ID</label>
                <label class="value">{{employeeForm.employeeId}}</label>
              </i-col>
              <i-col span="6">
                <label class="label" style="width: 100px">Status</label>
                <label class="value">
                  <span v-if="employeeForm.status ==1">Active</span>
                  <span v-if="employeeForm.status ==2">UnActive</span>
                </label>
              </i-col>
              <i-col span="6">
                <label class="label" style="width: 80px">Birth Date</label>
                <label class="value">{{employeeForm.birthDate}}</label>
              </i-col>
              <i-col span="6">
                <label class="label" style="width: 30px">Age</label>
                <label class="value">
                  {{employeeForm.age}}
                </label>
              </i-col>
            </Row>
            <Row class="sub-row">
              <i-col span="6">
                <label class="label" style="width: 100px">SSN</label>
         <!--       <label class="value">{{employeeForm.ssn}}</label>-->
                <span v-if="!showSSN">{{employeeForm.ssn?'xxx-xx-'+ employeeForm.ssn.split('-')[2]:''}}</span>
                <span v-else>{{employeeForm.ssn||''}}</span>
              </i-col>
            </Row>
            <Row class="sub-row">
              <i-col span="6">
                <label class="label" style="width: 100px">Gender</label>
                <label class="value">
                  <span v-if="employeeForm.gender==1">Male</span>
                  <span v-if="employeeForm.gender==2">Female</span>
                </label>
              </i-col>
              <i-col span="6">
                <label class="label" style="width: 100px">Marital Status</label>
                <label class="value">
                  <span v-if="employeeForm.maritalStatus==1">Single</span>
                  <span v-if="employeeForm.maritalStatus==2">Married</span>
                </label>
              </i-col>
            </Row>
          </div>
        </div>
        <div class="sub-info-item">
          <div class="sub-title">Address</div>
          <div class="sub-content">
            <Row class="sub-row">
              <i-col span="24">
                <label class="label" style="width: 100px">Home Address</label>
                <label class="value">{{employeeForm.homeAddress}}</label>
              </i-col>
            </Row>
          </div>
        </div>
        <div class="sub-info-item">
          <div class="sub-title">Contact</div>
          <div class="sub-content">
            <Row class="sub-row">
              <i-col span="24">
                <label class="label" style="width: 100px">Email</label>
                <label class="value">{{employeeForm.emailAddress}}</label>
              </i-col>
            </Row>
            <Row class="sub-row">
              <i-col span="6">
                <label class="label" style="width: 100px">Phone</label>
                <label class="value">{{employeeForm.cellPhone}}</label>
              </i-col>
              <i-col span="6">
                <label class="label" style="width: 100px">Home Tel</label>
                <label class="value">{{employeeForm.homeTel}}</label>
              </i-col>
              <i-col span="6">
                <label class="label" style="width: 80px">Work Tel</label>
                <label class="value">{{employeeForm.workTel}}</label>
              </i-col>
            </Row>
          </div>
        </div>
      </div>
      <div class="content edit-content animated fadeIn" v-show="editMyInfo">
        <Form class="myInfo-form" v-model="employeeEditModel" :label-width="100" label-position="left">
          <div class="sub-info-item">
            <div class="sub-title">Basic Information</div>
            <div class="sub-content">
              <Row class="sub-row">
                <i-col span="6">
                  <Form-item class="form-item"  label="Employee ID">
                    <Input v-model="employeeEditModel.employeeCode" ></Input>
                  </Form-item>
                </i-col>
                <i-col span="6">
                  <Form-item class="form-item"   label="Status">
                    <Select v-model="employeeEditModel.status" >
                      <Option v-for="(item,key) in statusList" :key="item" :value="item.value">{{item.label}}</Option>
                    </Select>
                  </Form-item>
                </i-col>
              </Row>
              <Row class="sub-row">
                <i-col span="6">
                  <Form-item class="form-item"  label="Gender">
                    <Select v-model="employeeEditModel.gender">
                      <Option v-for="(item,key) in genderList" :key="key" :value="item.value">{{item.label}}</Option>
                    </Select>
                  </Form-item>
                </i-col>
                <i-col span="6">
                  <Form-item class="form-item"   label="Marital Status">
                    <Select v-model="employeeEditModel.maritalStatus">
                      <Option v-for="(item,key) in MaritalStatusList" :key="key" :value="item.value">{{item.label}}</Option>
                    </Select>
                  </Form-item>
                </i-col>
                <i-col span="6">
                  <Form-item class="form-item"   label="Birth Date">
                    <Date-picker type="date"v-model="employeeEditModel.birthDate" @change="" value="yyyy-MM-dd"  format="yyyy-MM-dd" @on-change="formatBirthDate" ></Date-picker>
                  </Form-item>
                </i-col>
              </Row>
              <Row class="sub-row">
                <i-col span="6">
                  <Form-item class="form-item"  label="First Name">
                    <Input v-model="employeeEditModel.firstName"></Input>
                  </Form-item>
                </i-col>
                <i-col span="6">
                  <Form-item class="form-item"   label="M.l">
                    <Input v-model="employeeEditModel.middleName"></Input>
                  </Form-item>
                </i-col>
                <i-col span="6">
                  <Form-item class="form-item"   label="Last Name">
                    <Input v-model="employeeEditModel.lastName"></Input>
                  </Form-item>
                </i-col>
                <i-col span="6">
                  <Form-item class="form-item"   label="Age" :label-width="40" >
                    {{formatBirthDay(employeeEditModel.birthDate)}}
                  </Form-item>
                </i-col>
              </Row>
              <Row class="sub-row">
                <i-col span="6">
                  <Form-item class="form-item"  label="SSN">
                    <Input  v-model="employeeEditModel.ssn"></Input>
                  </Form-item>
                </i-col>
              </Row>
            </div>
          </div>
          <div class="sub-info-item">
            <div class="sub-title">Address</div>
            <div class="sub-content">
              <Row class="sub-row">
                <i-col span="18">
                  <Form-item class="form-item"  label="Home Address" :label-width="110">
                    <Input v-model="employeeEditModel.homeAddress"></Input>
                  </Form-item>
                </i-col>
              </Row>
              <Row class="sub-row">
                <i-col span="6">
                  <Form-item class="form-item"  label="City or town">
                    <Input v-model="employeeEditModel.city"></Input>
                  </Form-item>
                </i-col>
                <i-col span="6">
                  <Form-item class="form-item"   label="Zip Code">
                    <Input v-model="employeeEditModel.zipCode"></Input>
                  </Form-item>
                </i-col>
                <i-col span="6">
                  <Form-item class="form-item"   label="State" >
                    <Select v-model="employeeEditModel.stateId" @on-change="stateChange" :label-in-value="true">
                      <Option v-for="(item,key) in employeeForm.listState" :value="item.stateId" :key="key">{{item.name}}</Option>
                    </Select>
                  </Form-item>
                </i-col>
                <i-col span="6">
                  <Form-item class="form-item"   label="Country">
                    <Select v-model="employeeEditModel.countryId"  @on-change="countryChange" :label-in-value="true">
                      <Option v-for="(item,key) in employeeForm.listCountry" :value="item.countryId" :key="key">{{item.name}}</Option>
                    </Select>
                  </Form-item>
                </i-col>
              </Row>
            </div>
          </div>
          <div class="sub-info-item">
            <div class="sub-title">Contact</div>
            <div class="sub-content">
              <Row class="sub-row">
                <i-col span="6">
                  <Form-item class="form-item"  label="Email ">
                    <Input v-model="employeeEditModel.emailAddress"></Input>
                  </Form-item>
                </i-col>
                <i-col span="6">
                  <Form-item class="form-item"   label="Phone">
                    <Input v-model="employeeEditModel.cellPhone"></Input>
                  </Form-item>
                </i-col>
                <i-col span="6">
                  <Form-item class="form-item"   label="Home Tel">
                    <Input v-model="employeeEditModel.homeTel"></Input>
                  </Form-item>
                </i-col>
                <i-col span="6">
                  <Form-item class="form-item"   label="Work Tel" >
                    <Input v-model="employeeEditModel.workTel"></Input>
                  </Form-item>
                </i-col>
              </Row>
            </div>
          </div>
          <!--<div class="sub-info-item">
            <div class="sub-title">Education</div>
            <div class="sub-content">
              <Row class="sub-row">
                <i-col span="12">
                  <Form-item class="form-item"  label="Highest Education Level " :label-width="200">
                    <Input v-model="employeeEditModel.highesEducationLevel"></Input>
                  </Form-item>
                </i-col>
              </Row>
            </div>
          </div>-->
          <Form-item class="form-item btn-group">
            <button class="default-btn" @click="editMyInfo=false">Cancel</button>
            <button class="default-btn active" @click="updateEmployee">Done</button>
          </Form-item>
        </Form>
      </div>
    </div>
    <!--job info -->
    <div class="info-item job-item">
      <div class="title" style="margin-bottom: 0"><i class="iconfont title-icon job-icon">&#xe65c;</i>Job Info</div>
      <div class="sub-info-item">
        <div class="sub-content">
          <Row class="sub-row">
            <i-col span="24">
              <label class="label" style="width: 100px">Hire Date</label>
              <label class="value">{{employeeForm.joinDate}}</label>
            </i-col>
          </Row>
        </div>
      </div>
      <div class="sub-info-item add-job">
        <div v-show="!addJob">
          <div class="sub-title hover-sub-title">Job Information <i class="iconfont  add-icon r" @click="addJob = true">&#xe695;</i></div>
          <div class="sub-content">
            <i-table class="table-panel job-table" :columns="jobTableColumns" :data="employeeForm.wr"></i-table>
          </div>
        </div>
        <div class="add-job-info-content"  v-show="addJob">
          <div class="sub-title">Job Information <i class="iconfont  add-icon r">&#xe695;</i></div>
          <div class="sub-content">
            <Row class="sub-row info-table-title">
              <i-col span="4">Effective Date</i-col>
              <i-col span="4">Org</i-col>
              <i-col span="4">Work Location</i-col>
              <i-col span="4">Job Title</i-col>
              <i-col span="4">Time Zone</i-col>
              <i-col span="4"></i-col>
            </Row>
            <!--  add job ================-->
            <Form class="add-Job-info-form" ref="addJobForm" v-model="addJobInfoModel" :rules="addJobInfoRules">
              <Row class="sub-row add-Job-row">
                <i-col span="4">
                  <Form-item prop="effectiveDate">
                    <Date-picker size="small" style="width: 80%;margin-top: 5px" type="date" v-model="addJobInfoModel.effectiveDate" @change="" value="yyyy-MM-dd"  format="yyyy-MM-dd" @on-change="formatAddJobEffectiveDate" ></Date-picker>
                  </Form-item>
                </i-col>
                <i-col span="4">
                  <Form-item v-on-click-away = "hideOrgTree">
                    <Dropdown  trigger="custom" :visible="addJobOrgListShow" style="width: 100%">
                      <Input size="small" style="width: 80%;"  v-model="addJobInfoModel.department" icon="arrow-down-b" readonly @click.native="addJobOrgListShow=true">
                      <Dropdown-menu slot="list">
                        <el-tree
                          class="filter-tree"
                          :expand-on-click-node="false"
                          :data="employeeForm.orgList"
                          :props="orgProps"
                          default-expand-all
                          @node-click="orgTreeClick"
                        >
                        </el-tree>
                      </Dropdown-menu>
                    </Dropdown>
                  </Form-item>
                </i-col>
                <i-col span="4">
                  <Form-item>
                   <Select  size="small" style="width: 80%;" v-model="addJobInfoModel.workAddressId" @on-change="addJobAddressChange" :label-in-value="true">
                     <Option v-for="(item,key) in employeeForm.companyAddressList" :key="key" :value="item.addressId">{{item.address}}</Option>
                   </Select>
                  </Form-item>
                </i-col>
                <i-col span="4">
                  <Form-item>
                    <Select  size="small" style="width: 80%;" v-model="addJobInfoModel.jobId" @on-change="addJobJobTitleChange" :label-in-value="true">
                      <Option v-for="(item,key) in employeeForm.pList" :key="key" :value="item.jobId">{{item.jobTitle}}</Option>
                    </Select>
                  </Form-item>
                </i-col>
                <i-col span="4">
                  <Form-item>
                    <Select  size="small" style="width: 80%;" v-model="addJobInfoModel.timeZoneId" @on-change="addJobTimeZoneChange" :label-in-value="true">
                      <Option v-for="(item,key) in timezoneList" :key="key" :value="item.timeId">{{item.timezoneId}}</Option>
                    </Select>
                  </Form-item>
                </i-col>
                <i-col span="4"></i-col>
              </Row>
            </Form>
            <div class="add-Job-btn-group">
              <button class="default-btn" @click="cancelSaveJob">Cancel</button><button class="default-btn active"  @click="saveJob">Save</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--
    &lt;!&ndash;work info&ndash;&gt;
    <div class="info-item work-item">
      <div class="title"><i class="iconfont title-icon work-icon">&#xe60b;</i>Work History</div>
      <div class="item-list">
        <div class="item"><label>01/10/2013—05/12/2014</label>AMOMATIC,Administrative Director</div>
        <div class="item"><label>01/12/2011—01/02/2012</label>Tencent , System Programmer</div>
      </div>
    </div>
    &lt;!&ndash;skill info &ndash;&gt;
    <div class="info-item skill-item">
      <div class="title"><i class="iconfont title-icon skill-icon">&#xe69b;</i>Skills</div>
      <div class="sub-info-item">
        <div class="sub-title">Education Experience</div>
        <div class="sub-content">
          <div class="item-list" style="padding-left: 0">
            <div class="item"><label>01/10/2013—05/12/2014</label>AMOMATIC,Administrative Director</div>
            <div class="item"><label>01/12/2011—01/02/2012</label>Tencent , System Programmer</div>
          </div>
        </div>
      </div>
      <div class="sub-info-item">
        <div class="sub-title">Language Skills</div>
        <div class="sub-content">
          <div class="item-list" style="padding-left: 0">
            <div class="item"><label>01/10/2013</label>AMOMATIC,Administrative Director</div>
          </div>
        </div>
      </div>
    </div>
    <div class="info-item contact-item">
      <div class="title"><i class="iconfont title-icon contact-icon">&#xe68c;</i>Emergency Contact</div>
      <div class="sub-info-item">
        <Row>
          <i-col span="6"></i-col>
          <i-col span="6"></i-col>
          <i-col span="8"></i-col>
          <i-col span="4"></i-col>
        </Row>
      </div>
    </div>
    <div class="info-item attachment-item">
      <div class="title"><i class="iconfont title-icon attachment-icon">&#xe61b;</i>Attachment List </div>

    </div>-->
	</div>
</template>

<script>
  import { directive as onClickAway } from 'vue-clickaway';

	export default {
    name: 'personInfo',

    directives: {
      onClickAway: onClickAway,
    },
		created(){
			this.init();
    },
		computed:{
		  employeeForm(){
        return this.$store.getters.employeeForm;
      },
      timezoneList(){
        return this.$store.getters.timezoneList;
      }
    },
		watch:{
      employeeForm(value){
        for(var i in this.employeeEditModel){
          if(value[i]){
            this.employeeEditModel[i]  = value[i];
          }
        }
      },
    },
		data () {
			var t  = this;
			return {
        id:null,
        editMyInfo:false,
        addJob:false,
        addJobOrgListShow:false,
        orgProps:{
          children: 'children',
          label: 'orgName'
        },
        statusList:[
          {
              label:'Active',
              value:1
          },
          {
            label:'unActive',
            value:2
          }
        ],
        genderList:[
          {
            label:'Female',
            value:1
          },
          {
            label:'Male',
            value:2
          }
        ],
        MaritalStatusList:[
          {
            label:'Single',
            value:1
          },
          {
            label:'Married',
            value:2
          }
        ],
        jobTableColumns:[
          {
          	key:'effectiveDate',
            title:'Effective Date',
          },
          {key:'department',title:'Org'},
          {key:'workAddress',title:'Work Location'},
          {key:'jobTitle',title:'Job Title'},
          {key:'timeZone',title:'Time Zone'},
          {
          	title:' ',
            render:function (row,column,index) {
              return  ` <i class="iconfont edit-icon" @click="editJob(${index})">&#xe665;</i> <i class="iconfont delete-icon" @click.stop="deleteJob(${row.id})">&#xe668;</i>`;
            }
          }
        ],
        jobTableData:[],
        showSSN:false,
        employeeEditModel:{
          employeeCode: null,
          firstName: null,
          orgId: null,
          department: null,
          middleName: null,
          lastName: null,
          effectiveDate: null,
          preferredName: null,
          jobTitle: null,
          jobId: null,
          countryId: null,
          country: null,
          stateId: null,
          state: null,
          status: null,
          birthDate: null,
          ssn: null,
          gender: null,
          timeZoneId: null,
          timeZone: null,
          age: null,
          homeAddress: null,
          homeAddressId: null,
          workAddress: null,
          workAddressId: null,
          emailAddress: null,
          cellPhone: null,
          homeTel: null,
          workTel: null,
          city: null,
          zipCode:null,
          maritalStatus:null,
        },
        addJobInfoModel:{
          employeeId:null,
          effectiveDate:null,
          workAddress:null,
          workAddressId:null,
          department:null,
          orgId:null,
          jobTitle:null,
          jobId:null,
          timeZone:null,
          timeZoneId:null,
          id:null,
        },
        editJobColumnId:null,
        addJobInfoRules:{

        }
			}
		},
    methods:{
      init(){
        this.id = this.$route.params.id;
        this.getEmployeeForm();
        this.getAllTimezone();
      },
      getAllTimezone(){
        this.$store.dispatch('getAllTimezone');
      },
      getEmployeeForm(){
         this.$store.dispatch('getEmployeeForm',{id:this.id});
      },
      formatBirthDay(date){
        if(date){
          return  new Date().getFullYear() - new Date(date).getFullYear();
        }
      },
      formatBirthDate(value){
        this.employeeEditModel.birthDate = value;
      },
      formatEffectiveDate(value){
        this.employeeEditModel.effectiveDate = value;
      },
      formatAddJobEffectiveDate(value){
        this.addJobInfoModel.effectiveDate = value;
      },
      orgTreeClick(data){
        this.addJobInfoModel.orgId = data.orgId;
        this.addJobInfoModel.department = data.orgName;
        this.addJobOrgListShow=false;
      },
      hideOrgTree(){
        this.addJobOrgListShow=false;
      },
      addJobAddressChange(data){
        this.addJobInfoModel.workAddress = data.label;
      },
      addJobJobTitleChange(data){
        this.addJobInfoModel.jobTitle = data.label;
      },
      addJobTimeZoneChange(data){
        this.addJobInfoModel.timeZone = data.label;
      },
      stateChange(data){
        this.employeeEditModel.state = data.label;
      },
      countryChange(data){
        this.employeeEditModel.country = data.label;
      },
      updateEmployee(){
        this.employeeEditModel.id = this.id;
        this.$store.dispatch('updateEmployee',this.employeeEditModel).then(
          ()=>{
            this.$Message.success('update success');
            this.editMyInfo = false;
            this.getemployeeForm();
          }
        );
      },
      saveJob(){
      	if(this.addJob == 'edit'){
          this.$refs['addJobForm'].validate((valid) => {
            if (valid) {
              this.addJobInfoModel.employeeId = this.employeeForm.employeeId;
              this.$store.dispatch('updateJobInfo',this.addJobInfoModel).then(
                ()=>{
                  this.$Message.success('update Success');
                  this.addJob = false;
                  this.$refs['addJobForm'].resetFields();
                  this.getEmployeeForm();
                  this.addJobInfoModel ={
                    employeeId:null,
                      effectiveDate:null,
                      workAddress:null,
                      workAddressId:null,
                      department:null,
                      orgId:null,
                      jobTitle:null,
                      jobId:null,
                      timeZone:null,
                      timeZoneId:null,
                      id:null,
                  }
                }
              );
            }
          })
        }else{
          this.$refs['addJobForm'].validate((valid) => {
            if (valid) {
              this.addJobInfoModel.employeeId = this.employeeForm.employeeId;
              this.$store.dispatch('saveJobInfo',this.addJobInfoModel).then(
                ()=>{
                  this.$Message.success('add Success');
                  this.addJob = false;
                  this.getEmployeeForm();
                  this.addJobInfoModel ={
                    employeeId:null,
                    effectiveDate:null,
                    workAddress:null,
                    workAddressId:null,
                    department:null,
                    orgId:null,
                    jobTitle:null,
                    jobId:null,
                    timeZone:null,
                    timeZoneId:null,
                    id:null,
                  }
                }
              );
            }
          })
        }
      },
      deleteJob(id){
        this.$Modal.confirm({
            title: 'Delete Job',
            content: '<p>Delete this job?</p>',
            loading: true,
            onOk: () => {
               this.$store.dispatch('deleteJobInfo',{id:id}).then(
                  () =>{
                    this.$Modal.remove();
                    this.getEmployeeForm();
                    this.$Message.info('delete success!');
            }
        )
        }
        });
      },
      editJob(index){
      	for(var i in this.addJobInfoModel){
      		if(this.employeeForm.wr[index][i]){
            this.addJobInfoModel[i] = this.employeeForm.wr[index][i];
          }
          this.addJob = 'edit';
        }
      },
      cancelSaveJob(){
        this.addJob = false;
      },
    }
	}
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss">
	@import "src/assets/css/variable.scss";
  $myInfoColor:#00CEC0;
  $jobInfoColor:#918EFF;
  $workHistoryColor:#9DD94C;
  $skillsColor:#F49C66;
  $emergencyContactColor:#EFA5FF;
  $attachmentListColor:#76C9FF;
	#personInfo {
    padding: 50px 61px;
    .info-item{
      padding-bottom: 30px;
      margin-bottom: 51px;
      border-bottom: 1px $baseBorderColor solid;
      >.title{
        /*font-family: PingFangTC-Regular;*/
        font-size: 20px;
        color: #325570;
        margin-bottom: 27px;
        >.title-icon{
          display: inline-block;
          width: 30px;
          height: 30px;
          line-height: 30px;
          margin-right: 16px;
          text-align: center;
          border-radius: 50%;
          color: #fff;
          font-size: 18px;
          vertical-align: middle;
        }
      }
      .content{
        padding: 12px 0;
        &.edit-content{
          background: #FFFFF0;
        }
        .myInfo-form{
          .form-item{
            padding-right: 20px;
            &.btn-group{
              text-align: right;
              padding-right: 80px;
              button{
                margin-right: 20px;
              }
            }
          }
          .ivu-form-item-label{
            font-size: 14px;
            color: #335570;
          }
        }
      }
      .sub-info-item{
        padding: 0 27px;
        .sub-title{
          position: relative;
          /*font-family: PingFangTC-Medium;*/
          font-size: 16px;
          color: #325570;
          height: 46px;
          line-height: 46px;
          &.hover-sub-title:hover{
            background: #FFFFFF;
            box-shadow: 6px 5px 10px 0 rgba(184,198,239,0.46);
            .add-icon{
              font-size: 20px;
              margin-right: 50px;
              vertical-align: middle;
              display: inline-block;
              &:hover{
                opacity: .7;
              }
            }
          }
          .add-icon{
            display: none ;
            color: $baseColor;
          }
          &:before{
            content: "";
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: 27px;
            background-color: rebeccapurple;
            border-radius: 50%;
          }
        }
        .sub-content{
          padding:18px 35px;
          .sub-row{
            margin-bottom: 10px;
           /* font-family: PingFangTC-Regular;*/
            font-size: 14px;
            .label{
              color: #96ACB9;
              display: inline-block;
              width: 80px;
              margin-right: 12px;
            }
            .value{
              color: #325570;
            }
          }
        }
        /*job table*/
        .job-table{
          border: 0;
          .ivu-table:before, .ivu-table:after{
            width: 0;
            height: 0;
          }
        }
        .add-job-info-content{
          background: #FFFFF0;
          padding: 4px;
          .info-table-title{
            height: 52px;
            line-height: 52px;
            background: #F2F9FF;
            padding: 0 12px;
            font-size: 14px;
            color: #96ACB9;
            margin-bottom: 0;
          }
          .add-Job-row{
            height: 72px;
            line-height: 52px;
            padding: 12px;
            font-size: 14px;
            border: 1px $baseBorderColor solid;
            border-top :0;
            background-color: #fff;
            .ivu-select-dropdown{
              width: 240px;
            }
          }
          .add-Job-btn-group{
            margin: 20px auto;
            text-align: right;
            button{
              margin-left: 20px;
            }
          }
        }
        &.add-job{
          .edit-icon,.delete-icon{
              font-size: 18px;
              color: $baseColor;
              margin-right:12px ;
              vertical-align: middle;
              &:hover{
                opacity: .7;
              }
          }
        }
      }

      &.my-item .sub-info-item .sub-title:before, &.my-item >.title >.title-icon{
        background-color: $myInfoColor;
      }
      &.job-item .sub-info-item .sub-title:before, &.job-item >.title >.title-icon{
        background-color: $jobInfoColor;
      }
      &.work-item .sub-info-item .sub-title:before, &.work-item >.title >.work-icon{
        background-color: $workHistoryColor;
      }
      &.skill-item .sub-info-item .sub-title:before, &.skill-item >.title >.title-icon{
        background-color: $skillsColor;
      }
      &.contact-item .sub-info-item .sub-title:before, &.contact-item >.title >.title-icon{
        background-color: $emergencyContactColor;
      }
      &.attachment-item .sub-info-item .sub-title:before, &.attachment-item >.title >.title-icon{
        background-color: $attachmentListColor;
      }
      &.my-item{
        >.title{
          .edit-icon{
            float: right;
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            color: $baseColor;
            background: #F2F9FF;
            box-shadow: 2px 2px 5px 0 rgba(184,198,239,0.80);
            border-radius: 4px;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            &:hover{
              opacity: .7;
            }
          }
        }
      }
      .item-list{
        padding: 0 50px;
        .item{
          /*font-family: PingFangTC-Regular;*/
          font-size: 14px;
          color: #14252E;
          margin-bottom: 20px;
          &:last-child{
            margin-bottom: 0;
          }
          label{
            margin-right: 40px;
          }
        }
      }
    }
	}
</style>
